[element-ui] 엘리먼트 UI dialog 컴포넌트 예제 및 방법

VueJS에서 많이 사용되는 UI 라이브러리인 element UI의 diablog 컴포넌트에 대하여 알아봅니다.

# dialog component

화면에 window.open()의 새로운 창이 아닌 내부 레이어를 사용한 모달창을 띄우는 경우 dialog라고 부르기도 합니다. 엘리먼트UI(element UI) 역시 dialog를 사용할 수 있도록 컴포넌트를 제공합니다.

<el-dialog></el-dialog>



이 컴포넌트를 사용하면 쉽고 빠르게 모달창을 만들고 제어하는 것이 가능합니다. 몇 가지 장점으로는...

- Body 태그에 추가할 수 있음
- open, close 이벤트에 추가로 컴포넌트가 사라지거나 제거하는 경우의 제어도 가능
- 외부 클릭 닫기 또는 fullscreen 옵션 지원

이처럼 유용한 옵션을 제공합니다. 아래는 제공하는 다양한 프로터티입니다.


@ 자주 사용되는 것들
visible // 닫기, 열기 제어를 위한 변수 지정
title // Dialog의 제목에 추가됨
width // width 크기를 결정
append-to-body // Body 태그에 dialog를 붙여서 생성함
fullscreen // 전체 화면이 가능
lock-scroll // 바디 태그 scroll 잠금
custom-class // 클래스를 추가할 때 사용함


@ 그 외의 것들
close-on-press-escape // <Boolean> ESC 키를 클릭할 경우 닫을 수 있음
close-on-click-modal // <Boolean> 외부 영역 클릭시 닫을 수 있음
center // header 그리고 footer를 센터에 중앙 정렬

위에서 간단한 예를 만들어 보자면...
만약 모달창 외부를 클릭할 경우 닫히지 않도록 변경하려면 아래와 같이 코드를 작성하여 사용하는 것이 가능합니다.



그럼 위 속성들을 사용하여 예제를 만들어보겠습니다.

! 간단한 예제코드 보기

아래는 심플한 예제로 모달창을 생성하였습니다.

! el-dialog 이벤트 알아보기

이벤트를 사용하여 제어하는 방법입니다. 가장 많이 쓰이는 모달창이 열리고 닫히는 경우 이벤트를 추가할 수 있습니다. @open과 @close를 사용합니다.(v-on:open v-on:close)
@open
@close
@opened
@closed

위 이벤트에서 opened, closed는 애니메이션 효과가 끝나고 이벤트를 수행할 지의 차이입니다. 나머지는 동일합니다.

위 예제는 닫히기 전에 doSomething이라는 메소드를 실행하게 됩니다. 아래처럼 메소드가 필요하겠죠.

open, close, opened, closed는 모두 창을 닫으면서 이벤트를 수행합니다. 만약 창을 닫지 않고 닫으려고 할 때에 이벤트를 호출할 경우 아래처럼 before-close 속성을 사용할 수 있습니다.

위 코드는 창을 닫으려고 하면 호출되며 창이 안 닫치게 됩니다. 참고로 이벤트 후 창을 닫고 싶다면 @close처럼 이벤트 속성을 사용하면 됩니다. 아니면 $refs를 사용해 태그를 지정한 후 close()를 사용하는 것도 방법입니다.

여기까지 el-dialog를 알아보았습니다.